<template>
    <div class="app-container">
        <div class="main-container">
            <div class="page-header">
                <div class="left-section">
                    <h2 class="page-title"><router-link style="color: #409EFF;font-size: 14px;margin-right: 20px;transition: all 0.3s;" to="/main/renshi/banciguanli"><i data-v-51d45fda=""
                                class="el-icon-arrow-left"></i>返回</router-link>员工排班报表</h2>
                </div>
                <div class="right-section">
                    <router-link to="/main/renshi/banciguanli/paibanbaobiao/paibanbaobiao">
                        <el-button type="primary" icon="el-icon-plus">新增排班</el-button>
                    </router-link>
                </div>
            </div>

            <div class="content-wrapper">
                <div class="filter-container">
                    <el-input v-model="listQuery.keyword" placeholder="请输入日期/员工姓名" class="filter-item search-input"
                        @keyup.enter.native="handleFilter" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
                    </el-input>
                </div>

                <el-card class="table-card" shadow="hover">
                    <el-table v-loading="listLoading" :data="list" border stripe highlight-current-row
                        :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
                        <el-table-column align="center" label="序号" width="80" type="index" :index="indexMethod">
                        </el-table-column>
                        <el-table-column label="日期" prop="date" min-width="120" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <!-- 动态生成员工列 -->
                        <el-table-column v-for="employee in employees" :key="employee" :label="employee"
                            :prop="employee.toLowerCase()" min-width="100" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="备注" prop="remark" min-width="150" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="280" fixed="right">
                            <template slot-scope="{}">
                                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate()">
                                    编辑
                                </el-button>
                                <el-button type="success" size="mini" icon="el-icon-view" @click="handleView()">
                                    查看
                                </el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete()">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination-container">
                        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current"
                            :limit.sync="listQuery.size" @pagination="getList" />
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
    name: 'PaiBanList',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                current: 1,
                size: 10,
                keyword: ''
            },
            // 存储所有员工姓名
            employees: ['员工A', '员工B', '员工C', '员工D', '员工E'],
            tableHeaderStyle: {
                background: '#f5f7fa',
                color: '#303133',
                fontWeight: '600',
                height: '50px',
                padding: '0',
                textAlign: 'center'
            },
            tableCellStyle: {
                padding: '8px 0',
                textAlign: 'center'
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true;
            // 模拟异步请求
            new Promise((resolve) => {
                setTimeout(() => {
                    const fakeData = {
                        data: {
                            records: [
                                {
                                    id: 1,
                                    date: '2025-03-12',
                                    employeea: '早班',
                                    employeeb: '中班',
                                    employeec: '晚班',
                                    employeed: '休息',
                                    employeee: '早班',
                                    remark: '无'
                                },
                                {
                                    id: 2,
                                    date: '2025-03-13',
                                    employeea: '中班',
                                    employeeb: '晚班',
                                    employeec: '休息',
                                    employeed: '早班',
                                    employeee: '中班',
                                    remark: '注意安全'
                                }
                            ],
                            total: 2
                        }
                    };
                    resolve(fakeData);
                }, 1000);
            }).then(response => {
                this.list = response.data.records;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        handleFilter() {
            this.listQuery.current = 1;
            this.getList();
        },
        handleUpdate() {
            const targetRoute = '/main/pai/paiBanEdit?id=1&type=edit'; // Replace with the actual logic to get the target route
            if (this.$route.fullPath !== targetRoute) {
                this.$router.push(targetRoute);
            }
        },
        handleView() {
            const targetRoute = '/main/pai/paiBanView?id=1&type=view'; // Replace with the actual logic to get the target route
            if (this.$route.fullPath !== targetRoute) {
                this.$router.push(targetRoute);
            }
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该排班记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 模拟删除操作
                this.list = this.list.filter(item => item.id !== row.id);
                this.total = this.list.length;
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        },
        indexMethod(index) {
            return (this.listQuery.current - 1) * this.listQuery.size + index + 1;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
    // background-color: #f0f2f5;
    min-height: 100vh;
}

.main-container {
    max-width: 1400px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .page-title {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
    }
}

.content-wrapper {
    background-color: transparent;
}

.filter-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-input {
        width: 360px;
    }

    .filter-item {
        margin-right: 10px;
    }
}

.table-card {
    margin-bottom: 20px;
    border-radius: 4px;

    :deep(.el-card__body) {
        padding: 20px;
    }
}

.pagination-container {
    padding: 20px 0 0;
    text-align: right;
}

:deep(.el-table) {
    border-radius: 4px;

    &::before {
        display: none;
    }

    .el-table__header-wrapper {
        border-radius: 4px 4px 0 0;
    }
}

:deep(.el-button) {
    padding: 8px 15px;
    margin-left: 8px;

    [class*="el-icon-"]+span {
        margin-left: 4px;
    }

    &.el-button--mini {
        padding: 7px 12px;
    }
}

:deep(.el-input) {
    .el-input__inner {
        border-radius: 4px;
    }
}

:deep(.el-pagination) {
    padding: 0;
    margin-top: 20px;
}
</style>